import React, { Component} from 'react';
import {Link} from 'react-router';
import AllOrderList from '../../Component/CommonComponent/AllOrderList'
import Split from '../CommonComponent/Split'
import DistributionUnit from '../CommonComponent/DistributionUnit'
import Empty from '../CommonComponent/Empty'
import Top from '../CommonComponent/Top'
import {LeaderWarehouseList} from '../../Action/auth';
import Modal from '../../Component/CommonComponent/Modal'

export default class BuyerOrder extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.statusArray=[];
        this.status = '';
        this.state = {
            leaderWareList:'',
            orderNo:''
        };
    }

    componentWillMount(){
        let indexValue = this.props.location.query.index
        this.setState({index:indexValue?indexValue:0})
        this.getLeaderWarehouseList(0,1)
    }

    async onChange(index){
        await this.setState({index:index})
        if(this.state.index == '0'){
            this.getLeaderWarehouseList(0,1)
        }else if(this.state.index == 1){
            this.getLeaderWarehouseList(1,1)
        }
    }

    //订单列表
    async getLeaderWarehouseList(status,page){
        await LeaderWarehouseList(status,page)
            .then(res=>{
                this.setState({leaderWareList:res.resultList})
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }


    render(){
        const {isCancel,isReceived,leaderWareList} = this.state
        return(
            <div>
                <Top
                    title = {'配货订单'}
                />
                <div className="pf width100" style={{top:50}}>
                    <AllOrderList
                        index = {this.state.index}
                        onClick = {index=>this.onChange(index)}
                        /*contents={['全部','待发货','已发货','已完成','申请取消','已取消','已审单']}*/
                        contents={['未配货','已配货']}
                    />
                </div>
                <div className="containerNav" style={{top:90}}>
                    {
                        leaderWareList.length == 0?
                            <Empty />
                            :
                        leaderWareList&&leaderWareList.map((el,index)=>{
                            return(
                                <div className="paddinglr  border_bottom">
                                    <div className="flex flex-pack-justify flex-align-center border_bottom f14" style={{height:50}}>
                                        <span className="color6">订单号： {el.order_no}</span>
                                    </div>
                                    <Link to="/orderDetails" query={{orderNo:el.order_no}}>
                                        {
                                            el.detail&&el.detail.map((item,ind)=>{
                                                return(
                                                    <DistributionUnit
                                                        imgPath = {item.productImage}
                                                        orderName = {item.productName}
                                                        details = {item.attrDesc}
                                                        price = {''}
                                                        num = {item.num}
                                                    />
                                                )
                                            })
                                        }
                                    </Link>

                                    <Link to="/goPicking" query={{orderNo:el.order_no}}>
                                        <div className="flex flex-pack-justify-end" style={{height:30,paddingTop:5,marginBottom:20}}>
                                            <div
                                                style={{height:48,lineHeight: '48px',fontSize:28,margin:'10px -40px 0 0'}}
                                                className="bgk_lv colorfff border_4 f14 plr parent"
                                            >
                                                <span className="vAlign">去配货</span>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            )
                        })
                    }

                    {
                        isCancel?
                            <Modal
                                title = {'确定取消订单?'}
                                onClick = {()=>this.cancelOrder(this.state.ordernum)}
                                toHideModal={()=>this.setState({isCancel:false})}
                            />
                            :null
                    }
                </div>
            </div>
        )
    }

}